<template>
    <div class="wechat-pay flex-center">
        <div class="pay-content">
            <div class="left flex-center-column">
                <p>支付金额:</p>
                <p class="amount">2000.00<span class="unit">元</span></p>
            </div>
            <div class="right flex-center-column">
                <div class="erweima"></div>
                <div class="text">用微信支付</div>
                <div class="dashed-line"></div>
                <div class="step-tip flex-center-between">
                    <div class="step-item flex-center-column">
                        <div class="index">1</div>
                        <img class="step-img" src="../../assets/bb1ae2635afc13445eb536399fedd12.png" alt="" srcset="">
                        <p>在微信首页</p>
                        <p>打开"扫一扫"</p>
                    </div>
                    <div class="step-item flex-center-column">
                        <div class="index">2</div>
                        <img class="step-img" src="../../assets/44f57b767a24930af27a8dd6cd86a58.png" alt="" srcset="">
                        <p>扫码以上</p>
                        <p>二维码</p>
                    </div>
                    <div class="step-item flex-center-column">
                        <div class="index">3</div>
                        <img class="step-img" src="../../assets/9a520123c5ad20278a51f538c9b5cca.png" alt="" srcset="">
                        <p>输入支付密码</p>
                        <p>完成支付</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.wechat-pay {
    height: 100%;
    .pay-content {
        width: 683px;
        height: 421px;
        border-radius: 10px;
        background: #fff;
        display: flex
    }
    .left {
        width: 199px;
        font-size: 23px;
        color: #27282A;
    }
    .amount {
        font-size: 34px;
        color: #FF1717;
        margin-top: 28px;
    }
    .unit {
        font-size: 23px;
    }
    .right {
        flex: 1;
        padding: 0 100px;
        background: #0EAA37;
        width: 100%;
        border-radius: 0 10px 10px 0;
    }
    .text {
        color: #fff;
        font-size: 24px;
        margin: 10px 0;
    }
    .erweima {
        width: 200px;
        height: 200px;
        border-radius: 10px;
        background: #000;
    }
    .dashed-line {
        border-top: 1px dashed #fff;
        width: 100%;
    }
    .step-tip {
        font-size: 14px;
        color: #fff;
        width: 100%;
        text-align: center;
        margin-top: 10px;
        .index {
            width: 14px;
            height: 14px;
            line-height: 14px;
            text-align: center;
            border-radius: 50%;
            background: #fff;
            color: #0EAA37;
        }
        .step-img {
            width: 20px;
            margin: 5px 0;
        }
    }
    .step-item {
        font-size: 12px;
    }
}
</style>